<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin: 0;padding: 0;list-style: none;}
			.container{
				margin: 0 auto;
				width: 1500px;
				height: 1000px;
				position: relative;
			}
			
			ul li{
				position: absolute;
				transition: all 1s;
			}
			img{
				height: 100%;
				width: 100%;
			}
			.slide1{
				width: 500px;height: 250px;
				left: 200px;
				top: 20px;
				opacity: 0.4;
			}
			.slide2{
				width: 600px; height: 300px;
				left: 20px;
				top: 150px;
				opacity: 0.7;
			}
			.slide3{
				width: 800px;height: 400px;
				left: 50%;transform: translateX(-50%);
				top: 300px;
				opacity: 1;
				z-index: 999;
			}
			.slide4{
				width: 600px; height: 300px;
				right: 20px;
				top: 150px;
				opacity: 0.7;
			}
			.slide5{
				width: 500px;height: 250px;
				left: 800px;
				top: 20px;
				opacity: 0.4;
			}
			.goback,.gonext{
				height: 150px;
				width: 150px;
				border: 2px solid #ADFF2F;
				background: #87CEEB;
				position: absolute;
				top: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.gonext{
				right:0px;
			}
		</style>
</head>

<body>
	<div class="container">
		<ul>
			<li class="slide1"><a><img src="https://i.loli.net/2018/10/18/5bc761041f867.jpg" ondragstart='return false;'></a></li>
			<li class="slide2"><a><img src="https://i.loli.net/2018/10/18/5bc76104334e7.jpg" ondragstart='return false;'></a></li>
			<li class="slide3"><a><img src="https://i.loli.net/2018/10/18/5bc76104d8b18.jpg" ondragstart='return false;'></a></li>
			<li class="slide4"><a><img src="https://i.loli.net/2018/10/18/5bc76104d9c87.jpg" ondragstart='return false;'></a></li>
			<li class="slide5"><a><img src="https://i.loli.net/2018/10/18/5bc76105c5e39.jpg" ondragstart='return false;'></a></li>
		</ul>
		<div class="goback">上翻</div>
		<div class="gonext">下翻</div>
	</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

	var slides = ['slide1', 'slide2', 'slide3', 'slide4', 'slide5'];
	var flag = true;
	$('.goback').click(function () {
		if (flag) {
			flag = false;
			var last = slides.pop();
			slides.unshift(last);
			$('li').each(function (i, e) {
				e.className = slides[i];
			});
		}
	});
	$('.gonext').click(function () {
		if (flag) {
			flag = false;
			var first = slides.shift();
			slides.push(first);
			$('li').each(function (i, e) {
				e.className = slides[i];
			});
		}
	});
	$('li').each(function (i, e) {
		e.addEventListener('transitionend', function () {
			flag = true;
		})
	});
</script>

</html>